<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>cloud-home</title>
		<meta name="description" content="" />
		<meta name="author" content="hello" />
		<!-- stylesheet import-->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/table.css" />
		<style type="text/css">
		  	body{
		  		padding-top: 80px;
		  		padding-bottom:60px;
		  	}
  		</style>
	</head>
	<body>
		<div class="navbar navbar-fixed-top">
	      <div class="navbar-inner">
	        <div class="container">
	          <a class="brand">Cloud Service Center</a>
	          <div class="nav-collapse">
	            <ul class="nav">
	              <li class="active"><a>Home</a></li>
	              <li><a href="about.html">About</a></li>
	              <li><a href="contact.html">Contact</a></li>
	            </ul>
	            <ul class="nav" style="float: right">
	              <li class="active"><a id="user"></a></li>
	              <li><a href="index.html">logout</a></li>
	            </ul>
	          </div><!--/.nav-collapse -->
	        </div>
	      </div>
	    </div>
	
	    <div class="container">
	    	<ul class="nav nav-tabs">
  			  <li class="active"><a href="#fill_booking" data-toggle="tab">Fill Booking Form</a></li>
			  <li><a href="#shippment_detail" data-toggle="tab">Shipment Order Detail</a></li>
			  <li><a href="#inquiry_form" data-toggle="tab">Inquiry Form</a></li>
			  <li><a href="#confirm_cargo" data-toggle="tab">Cargo Booking Form</a></li>
			  <li><a href="#forward_bill" data-toggle="tab">Bill Form</a></li>
			  <li><a href="#shippment_info_query" data-toggle="tab">Query Shipment Information</a></li>
			</ul>
        	<div class="tab-content">
        		<div id="fill_booking" class="tab-pane active">
        			<table class="table">
    					<tr>
    						<td width="100px" style="text-align:right">SHIPPER</td>
    						<td><input id="booking_shipper" type="text"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">CONSIGNEE</td>
    						<td><input id="booking_con" type="text"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">NOTIFY PARTY</td>
    						<td><input id="booking_np" type="text"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">PORT OF RECEIPT</td>
    						<td><input id="booking_por" type="text"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">PORT OF LOADING</td>
    						<td><input id="booking_pol" type="text"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">OCEAN VESSEL</td>
    						<td><input id="booking_ov" type="text"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">PORT OF DISCHARGE</td>
    						<td><input id="booking_podis" type="text"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">PORT OF DELIVERY</td>
    						<td><input id="booking_podel" type="text"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">MARKS & NO</td>
    						<td><input id="booking_mark" rows="4" cols="20"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">QUANTITY</td>
    						<td><input id="booking_quantity" rows="4" cols="20"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">CARGO NAME</td>
    						<td><input id="booking_cargo" rows="4" cols="20"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">WEIGHT</td>
    						<td><input id="booking_weight" rows="4" cols="20"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">VOLUME/M3</td>
    						<td><input id="booking_m3" rows="4" cols="20"></td>
    					</tr>
    					<tr>
    						<td width="100px" style="text-align:right">LINER AGENT EMAIL</td>
    						<td><input id="booking_lae" rows="4" cols="20"></td>
    					</tr>
    					<tr>
    						<td width="100px"></td>
    						<td><input id="send_booking" type="button" class="btn btn-primary" value="Send"></td>
    					</tr>
    				</table>
        		</div>
        		<div id="inquiry_form" class="tab-pane">
        			<div>
        				<input id="query_inquiry" type="button" class="btn btn-primary" value="Query Inquiry Forms">
        			</div>
        			<div>
	    				<table id="inquiry_table" class="tablesorter"> 
								<thead> 
									<tr> 
										<th>No</th> 
										<th>Shipper</th>
										<th>Shipper Email</th>
										<th>Cargo Name</th> 
										<th>Destination</th> 
									</tr> 
								  </thead> 
									<tbody> 
									</tbody>
						</table>
	    			</div>
	    			<div class="modal hide fade" id="inquiry_info">
					  <div class="modal-header">
					    <a class="close" data-dismiss="modal">×</a>
					    <h3>INQUIRY INFORMATION</h3>
					  </div>
					  <div class="modal-body">
					  	<table class="table">
	    					<tr>
	    						<td width="100px" style="text-align:right">NO</td>
	    						<td><span id="inquiry_info_no"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">SHIPPER</td>
	    						<td><span id="inquiry_info_shipper"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">SHIPPER EMAIL</td>
	    						<td><span id="inquiry_info_email"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">DEPARTURE</td>
	    						<td><span id="inquiry_info_departure"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">DESTINATION</td>
	    						<td><span id="inquiry_info_dest"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">CARGO NAME</td>
	    						<td><span id="inquiry_info_cargo"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">WEIGHT</td>
	    						<td><span id="inquiry_info_weight"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">VOLUME</td>
	    						<td><span id="inquiry_info_m3"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">EXTRA INFORMATION</td>
	    						<td><span id="inquiry_info_info"></span></td>
	    					</tr>
	    				</table>
					  </div>
					  <div class="modal-footer">
					    <a id="inquiry_cancel" class="btn">Don't show it again</a>
					    <a id="inquiry_ok" class="btn btn-primary">Ok</a>
					  </div>
					</div>
        		</div>
        		<div id="confirm_cargo" class="tab-pane">
        			<div>
        				<input id="query_cargo" type="button" class="btn btn-primary" value="Query Cargo Booking">
        			</div>
        			<div>
	    				<table id="cargo_table" class="tablesorter"> 
								<thead> 
									<tr> 
										<th>No</th> 
										<th>Shipper</th>
										<th>Consignee</th>
										<th>Cargo Name</th> 
										<th>Shipper Email</th> 
									</tr> 
								  </thead> 
									<tbody> 
									</tbody>
						</table>
	    			</div>
	    			<div class="modal hide fade" id="cargo_info">
					  <div class="modal-header">
					    <a class="close" data-dismiss="modal">×</a>
					    <h3>CARGO INFORMATION</h3>
					  </div>
					  <div class="modal-body">
					  	<table class="table">
	    					<tr>
	    						<td width="100px" style="text-align:right">NO</td>
	    						<td><span id="cargo_info_no"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">SHIPPER</td>
	    						<td><span id="cargo_info_shipper"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">SHIPPER ADDRESS</td>
	    						<td><span id="cargo_info_addr"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">SHIPPER EMAIL</td>
	    						<td><span id="cargo_info_email"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">CONSIGNEE</td>
	    						<td><span id="cargo_info_con"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">CONSIGNEE ADDRESS</td>
	    						<td><span id="cargo_info_con_addr"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">DEPARTURE</td>
	    						<td><span id="cargo_info_departure"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">DESTINATION</td>
	    						<td><span id="cargo_info_dest"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">SPECIAL INSTRUCTIONS</td>
	    						<td><span id="cargo_info_spec"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">CARGO NAME</td>
	    						<td><span id="cargo_info_cargo"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">PIECES</td>
	    						<td><span id="cargo_info_pieces"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">WEIGHT</td>
	    						<td><span id="cargo_info_weight"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">VOLUME/M3</td>
	    						<td><span id="cargo_info_m3"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">CHARGES</td>
	    						<td><span id="cargo_info_charges"></span></td>
	    					</tr>
	    				</table>
					  </div>
					  <div class="modal-footer">
					    <a id="cargo_cancel" class="btn">Cancel</a>
					    <a id="cargo_confirm" class="btn btn-primary">Confirm</a>
					  </div>
					</div>
        		</div>
        		<div id="forward_bill" class="tab-pane">
        			<div>
        				<input id="query_forward_bill" type="button" class="btn btn-primary" value="Query Bills">
        			</div>
        			<div>
	    				<table id="forward_bill_table" class="tablesorter"> 
								<thead> 
									<tr> 
										<th>No</th> 
										<th>Company</th>
										<th>Consignee Name</th>
										<th>Consignee Address</th>
										<th>Deposit Bank</th> 
										<th>Account</th>
										<th>Cargo Name</th>  
									</tr> 
								  </thead> 
									<tbody> 
									</tbody>
						</table>
	    			</div>
	    			<div class="modal hide fade" id="bill_forward_info">
					  <div class="modal-header">
					    <a class="close" data-dismiss="modal">×</a>
					    <h3>INFORMATION</h3>
					  </div>
					  <div class="modal-body">
					  	you want to send the bill (no:<span id="bill_forward_no"></span>) to
					  	<input type="text" id="bill_forward_shipperEmail">
					  </div>
					  <div class="modal-footer">
					    <a id="bill_forward_cancel" class="btn">Cancel</a>
					    <a id="bill_forward_confirm" class="btn btn-primary">Confirm</a>
					  </div>
					</div>
        		</div>
        		<div id="shippment_detail" class="tab-pane">
        			<div>
        				<input id="shippment_query" type="button" class="btn btn-primary" value="Query Interchange Receipt">
        			</div>
        			<div>
	    				<table id="shippment_table" class="tablesorter"> 
								<thead> 
									<tr> 
										<th>No</th> 
										<th>Company</th>
										<th>Container User</th>
										<th>Port Of Delivery</th> 
										<th>Deliver To</th>
										<th>Place Of Return</th>
										<th>Time Out</th>
									</tr> 
								  </thead> 
									<tbody> 
									</tbody>
						</table>
	    			</div>
	    			<div class="modal hide fade" id="Shippment_info">
					  <div class="modal-header">
					    <a class="close" data-dismiss="modal">×</a>
					    <h3>PACKING LIST</h3>
					  </div>
					  <div class="modal-body">
					  	<table class="table">
					  		<tr>
	    						<td width="100px" style="text-align:right">INTERCHANGE RECEIPT NO</td>
	    						<td><span id="shippment_inter_no"></span></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">MOTORCADE EMAIL</td>
	    						<td><input type="text" id="shippment_info_moto_email"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">NO</td>
	    						<td><input type="text" id="shippment_info_no"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">SHIPPER</td>
	    						<td><input type="text" id="shippment_info_shipper"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">CONTAINER NO</td>
	    						<td><input type="text" id="shippment_info_cno"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">OCEAN VESSEL</td>
	    						<td><input type="text" id="shippment_info_ov"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">CARGO NAME</td>
	    						<td><input type="text" id="shippment_info_cargo"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">BOXES</td>
	    						<td><input type="text" id="shippment_info_boxes"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">QUANTITY</td>
	    						<td><input type="text" id="shippment_info_quantity"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">UNIT PRICE</td>
	    						<td><input type="text" id="shippment_info_up"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">TOTAL PRICE</td>
	    						<td><input type="text" id="shippment_info_tp"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">UNIT VOLUME</td>
	    						<td><input type="text" id="shippment_info_uv"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">TOTAL VOLUME</td>
	    						<td><input type="text" id="shippment_info_tv"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">TOTAL WEIGHT</td>
	    						<td><input type="text" id="shippment_info_tw"></td>
	    					</tr>
	    					<tr>
	    						<td width="100px" style="text-align:right">PLACE OF ORIGIN</td>
	    						<td><input type="text" id="shippment_info_poo"></td>
	    					</tr>
	    				</table>
					  </div>
					  <div class="modal-footer">
					    <a id="shippment_cancel" class="btn">Cancel</a>
					    <a id="shippment_send" class="btn btn-primary">Send</a>
					  </div>
					</div>
        		</div>
        		<div id="shippment_info_query" class="tab-pane">
        			<div>
        				<input id="query_shipment_info" type="button" class="btn btn-primary" value="Query Shipment Info">
        			</div>
        			<div>
	    				<table id="shippment_info_table" class="tablesorter"> 
								<thead> 
									<tr> 
										<th>Booking No</th> 
										<th>Information</th>
									</tr> 
								  </thead> 
									<tbody> 
									</tbody>
						</table>
	    			</div>
        		</div>
        	</div>
	    </div> <!-- /container -->
	    
	    <!-- JavaScript at the bottom for fast page loading -->

		  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
		  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		  <script src="js/libs/jquery-1.7.1.min.js"></script>
		<!-- import bootstrap-->
		<script src="bootstrap/js/bootstrap.js"></script>
		<script src="js/home.js"></script>
		<script src="js/libs/jquery.dataTables.min.js"></script>
		<script src="test/test.js"></script>
	</body>
</html>
